<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="pg"    uri="http://jsptags.com/tags/navigation/pager" %>
<%@ taglib prefix="pg"    uri="http://jsptags.com/tags/navigation/pager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

</head>

<body class="no-skin">
	<table id="sample-table-1"
		class="table table-striped table-bordered table-hover">

		<tr>
			<a title="增加试题" class="btn btn-info btn-lg add-test"> <span
				class="glyphicon glyphicon-plus-sign"></span></a>
		</tr>
		<tr>
			<th>题号</th>
			<th>科目</th>
			<th>题干</th>
			<th>选项A</th>
			<th>选项B</th>
			<th>选项C</th>
			<th>选项D</th>
			<th>答案</th>
			<th>题目类型</th>
			<th>题目分数</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${ExamTestList.dates }" var="ExamTestList">
			<tr>
				<td>${ExamTestList.id }</td>
				<td>${ExamTestList.subName }</td>
				<td>${ExamTestList.content }</td>
				<td>${ExamTestList.chooseA }</td>
				<td>${ExamTestList.chooseB }</td>
				<td>${ExamTestList.chooseC }</td>
				<td>${ExamTestList.chooseD }</td>
				<td>${ExamTestList.answer }</td>
				<td>${ExamTestList.testType }</td>
				<td>${ExamTestList.testTypeScore }</td>
				<td><a title="查看试题" class="btn btn-primary btn-xs show-test"><i
						class="ace-icon fa fa-comment"></i></a> <a title="修改试题"
					class="btn btn-primary btn-xs edit-test"><i
						class="ace-icon fa fa-pencil"></i></a> <a
					href="deleteTest/${ExamTestList.id }" title="删除试题"
					class="btn btn-primary btn-xs delete-test" onclick="msg();"><i
						class="ace-icon fa fa-trash-o"></i></a></td>
			</tr>
		</c:forEach>
		<tr>
			<td colspan="4"><jsp:include page="page.jsp">
					<jsp:param name="url" value="${pageContext.request.contextPath }/ExamTests" />
					<jsp:param name="items" value="${ExamTestList.totalSize }" />
				</jsp:include></td>
		</tr>
	</table>



	<!-- 模态框（Modal）查看 -->
	<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog"
		aria-labelledby="showTestModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">查看详细试题</h4>
				</div>
				<div class="modal-body">
					<label>试题科目：&nbsp;&nbsp;</label><span class="sub-name"></span>-------<span
						class="test-type"></span>每题<span class="test-type-score"></span>分<br />
					<label>题目：&nbsp;&nbsp;</label><span class="content"></span><br />
					<label>A：&nbsp;&nbsp;</label><span class="choose-a"></span><br />
					<label>B：&nbsp;&nbsp;</label><span class="choose-b"></span><br />
					<label>C：&nbsp;&nbsp;</label><span class="choose-c"></span><br />
					<label>D：&nbsp;&nbsp;</label><span class="choose-d"></span><br />
					<label style="font-weight: bold">答案：&nbsp;&nbsp;</label><span
						class="answer"></span><br />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 模态框（Modal）增加 -->
	<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog"
		aria-labelledby="showTestModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="addTestModaLabel">添加试题</h4>
				</div>
				<div class="modal-body">
					<form id="addTestForm" method="post">
						<p>
							<label>科目：</label><select name="subId">
								<option value="1">英语</option>
								<option value="3">语文</option>
								<option value="4">数学</option>
							</select>
						</p>
						<p>
							<label>试题类型：</label><select name="testType">
								<option value="1" id="addsigle">单项选择题</option>
								<!-- <option value="2" id="addmultiterm">多项选择题</option> -->
							</select><label class="testTypeScore"></label>
						</p>
						<p>
							<label>题干：</label>
							<textarea name="content" cols="50" rows="8" placeholder="填写题目内容 "></textarea>
						</p>
						<p>
							<label>选项A：</label><input type="text" name="chooseA"
								placeholder="填写内容，作为选项A" />
						</p>
						<p>
							<label>选项B：</label><input type="text" name="chooseB"
								placeholder="填写内容，作为选项B" />
						</p>
						<p>
							<label>选项C：</label><input type="text" name="chooseC"
								placeholder="填写内容，作为选项C" />
						</p>
						<p>
							<label>选项D： </label><input type="text" name="chooseD"
								placeholder="填写内容，作为选项D" />
						</p>
						<p>
							<label>答案：</label> <span class="answerTotal"> <input
								class="sigle1" type="radio" name="answer" value="A" checked />
								<input class="multiterm1" type="checkbox" name="answer"
								value="A"> 选项A <input class="sigle1" type="radio"
								name="answer" value="B" /> <input class="multiterm1"
								type="checkbox" name="answer" value="B"> 选项B <input
								class="sigle1" type="radio" name="answer" value="C" /> <input
								class="multiterm1" type="checkbox" name="answer" value="C">
								选项C <input class="sigle1" type="radio" name="answer" value="D" />
								<input class="multiterm1" type="checkbox" name="answer"
								value="D"> 选项D
							</span>
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addTestSaveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<!-- 模态框（Modal）修改 -->
	<div class="modal fade" id="editTestModal" tabindex="-1" role="dialog"
		aria-labelledby="editTestModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="editTestModaLabel">修改试题</h4>
				</div>
				<div class="modal-body">
					<form id="editTestForm" method="post">
						<p>
							<input type="hidden" name="testId" />
						</p>
						<p>
							<label>科目：</label><select name="subId" class="editSubId">
								<option value="1">英语</option>
								<option value="2">数学</option>
								<option value="3">语文</option>
							</select>
						</p>
						<p>
							<label>试题类型：</label><select name="testType">
								<option value="1" id="editsigle">单项选择题</option>
								<option value="2" id="editmultiterm">多项选择题</option>
							</select><label class="testTypeScore"></label>
						</p>
						<p>
							<label>题干：</label>
							<textarea name="content" cols="50" rows="8" placeholder="填写题目内容 "></textarea>
						</p>
						<p>
							<label>选项A：</label><input type="text" name="chooseA"
								placeholder="填写内容，作为选项A" />
						</p>
						<p>
							<label>选项B：</label><input type="text" name="chooseB"
								placeholder="填写内容，作为选项B" />
						</p>
						<p>
							<label>选项C：</label><input type="text" name="chooseC"
								placeholder="填写内容，作为选项C" />
						</p>
						<p>
							<label>选项D： </label><input type="text" name="chooseD"
								placeholder="填写内容，作为选项D" />
						</p>
						<p>
							<label>答案：</label> <span class="answerTotal"><input
								class="sigle1" type="radio" name="answer" value="A" />
								<input class="multiterm1" type="checkbox" name="answer"
								value="A"> 选项A <input class="sigle1" type="radio"
								name="answer" value="B" /> <input class="multiterm1"
								type="checkbox" name="answer" value="B"> 选项B <input
								class="sigle1" type="radio" name="answer" value="C" /> <input
								class="multiterm1" type="checkbox" name="answer" value="C">
								选项C <input class="sigle1" type="radio" name="answer" value="D" />
								<input class="multiterm1" type="checkbox" name="answer"
								value="D"> 选项D </span>
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="editTestSaveBtn" type="button" class="btn btn-primary">修改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.min.js'>"
								+ "<"+"/script>");
	</script>
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2')
			//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
			.dataTable({
				bAutoWidth : false,
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ],
				"aaSorting" : [],
			});

			$(document).on(
					'click',
					'th input:checkbox',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});
					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}

			$('.show-test').click(
					function() {
						var testId = $(this).parent().siblings().eq(0).text();
						$
								.ajax({
									type : 'POST',
									url : '${contextPath}/teacher/getTestById',
									data : {
										testId : testId
									},
									dateType : "json",
									success : function(data) {
										$("#showTestModal .sub-name").text(

										data.subName);
										$("#showTestModal .content").text(
												data.content);
										$('#showTestModal .test-type').text(
												data.testType);
										$('#showTestModal .test-type-score')
												.text(data.testTypeScore);
										$('#showTestModal .choose-a').text(
												data.chooseA);
										$('#showTestModal .choose-b').text(
												data.chooseB);
										$('#showTestModal .choose-c').text(
												data.chooseC);
										$('#showTestModal .choose-d').text(
												data.chooseD);
										$('#showTestModal .answer').text(
												data.answer);
									}
								});
						$('#showTestModal').modal('show');
					});
			$('.add-test').click(function() {
				$('#addTestModal').modal('show');
			});
			$('.edit-test').click(
					function() {
						var testId = $(this).parent().siblings().eq(0).text();
						$
								.ajax({
									type : 'POST',
									url : '${contextPath}/teacher/getTestById',
									data : {
										testId : testId
									},
									dateType : "json",
									success : function(data) {
										$(".editSubId option[value='"+data.subId+"']").attr("selected","selected");
										$("#editTestForm [name=content]").val(
												data.content);
										$('#editTestForm [name=testType]').val(
												data.testTypeId);
										$('#editTestForm [name=chooseA]').val(
												data.chooseA);
										$('#editTestForm [name=chooseB]').val(
												data.chooseB);
										$('#editTestForm [name=chooseC]').val(
												data.chooseC);
										$('#editTestForm [name=chooseD]').val(
												data.chooseD);
										$('#editTestForm [name=testId]').val(
												data.id);
										$("#editTestForm [name=answer][value='"+data.answer+"']").prop("checked","checked"); 
									}
								});
						$('#editTestModal').modal('show');
					});
			$('#addTestSaveBtn')
					.click(
							function() {
								var subId = $(
										'#addTestForm select[name="subId"]')
										.val();
								var testType = $(
										'#addTestForm select[name="testType"]')
										.val();
								var content = $(
										'#addTestForm textarea[name="content"]')
										.val();
								var chooseA = $(
										'#addTestForm input[name="chooseA"]')
										.val();
								var chooseB = $(
										'#addTestForm input[name="chooseB"]')
										.val();
								var chooseC = $(
										'#addTestForm input[name="chooseC"]')
										.val();
								var chooseD = $(
										'#addTestForm input[name="chooseD"]')
										.val();
								var answerString = '';
								if (testType == 1) {
									answerString += $(
											'#addTestForm input[name="answer"]:radio:checked')
											.val();
								} else if (testType == 2) {
									var array = $('#addTestForm input[name="answer"]:checkbox:checked');
									$
											.each(
													array,
													function(index, item) {
														answerString += (index == 0 ? $(
																item).val()
																: (',' + $(item)
																		.val()));
													});
								} else {
									alert('无此试题类型');
								}
								$.ajax({
									type : 'POST',
									url : '${contextPath}/teacher/saveTest',
									data : {
										subId : subId,
										testTypeId : testType,
										content : content,
										chooseA : chooseA,
										chooseB : chooseB,
										chooseC : chooseC,
										chooseD : chooseD,
										answer : answerString
									},
									dataType : "json",
									success : function(data) {
										if (data.success) {
											alert("添加成功");
											window.location.reload();
										}
									}
								});
							});
			$('#editTestSaveBtn')
					.click(
							function() {
								var subId = $(
										'#editTestForm select[name="subId"]')
										.val();
								var testType = $(
										'#editTestForm select[name="testType"]')
										.val();
								var content = $(
										'#editTestForm textarea[name="content"]')
										.val();
								var chooseA = $(
										'#editTestForm input[name="chooseA"]')
										.val();
								var chooseB = $(
										'#editTestForm input[name="chooseB"]')
										.val();
								var chooseC = $(
										'#editTestForm input[name="chooseC"]')
										.val();
								var chooseD = $(
										'#editTestForm input[name="chooseD"]')
										.val();
								var testId = $(
										'#editTestForm input[name="testId"]')
										.val();
								var answer = $(
										'#editTestForm input[name="answer"]:radio:checked')
										.val();
								$.ajax({
									type : 'POST',
									url : '${contextPath}/teacher/editTest',
									data : {
										subId : subId,
										testTypeId : testType,
										content : content,
										chooseA : chooseA,
										chooseB : chooseB,
										chooseC : chooseC,
										chooseD : chooseD,
										answer : answer,
										id : testId
									},
									dataType : "json",
									success : function(data) {
										if (data.success) {
											alert("修改成功");
											window.location.reload();
										}
									}
								});
							});
		})
		function msg() {
			if (!confirm("你确认要删除吗？"))
				window.event.returnValue = false;
		}
		$(document).ready(function() {
			$('#addTestForm select[name="testType"]').val("1");
			$(".multiterm1").hide();

			$("add#sigle").click(function() {
				$(".sigle1").show()
				$(".multiterm1").hide();
			});
			$("#addmultiterm").click(function() {
				$(".multiterm1").show()
				$(".sigle1").hide();
			});
		});
	</script>

</body>
</html>
